import React, { Component } from 'react';
import {ListProp} from '../../types/list';
import './index.css';
import {RouteComponentProps,withRouter} from 'react-router-dom';


interface Iprops extends RouteComponentProps{
    item:ListProp
}

class FoodItem extends Component <Iprops>{
    render() {
        let {pic,name,desc,num} = this.props.item;
        return (
            <dl className="food-item" onClick={this.goDetail}>
                <dt>
                    <img src={pic} alt=""/>
                </dt>
                <dd>
                    <h6>{name}</h6>
                    <p>{desc}</p>
                    <span>{num}</span>
                </dd>
            </dl>
        )
    }

    //去详情
    goDetail = () => {
        this.props.history.push(`/detail/${this.props.item.id}`)
    }
}

export default withRouter(FoodItem)